<template>
    <div>
        <el-dialog fullscreen center :close-on-click-modal="false" :close-on-press-escape="false"  :visible.sync="value" :show-close="false">
            <el-form :model="data">
                <el-alert :closable="false" style="margin:0px 0px 20px 0px" :title="'单选题'+ count.single +'道,多选题' + count.selection + '道,问答题' + count.ask + '道....请按照题目数量给出相应正确的出题数量'" show-icon type="warning"></el-alert>

                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="chapterId" label="选择章节">
                            <el-cascader-panel :props="{multiple: true,emitPath:false,value:'id',label:'name',children:'children'}" :show-all-levels="false" collapse-tags clearable filterable style="width: 800px;" :options="chapterData" v-model="checkedChapterIdArray">
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader-panel>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="checkedChapterIdArray.length > 0">
                        <el-form-item prop="questionTypeIds" label="试题类型">
                            <el-checkbox-group v-model="checkedQuestionTypeArray">
                                <el-checkbox label="1">单选题</el-checkbox>
                                <el-checkbox label="2">多选题</el-checkbox>
                                <el-checkbox label="3">问答题</el-checkbox>
                                <el-checkbox label="4">上机题</el-checkbox>
                            </el-checkbox-group>
                            <span style="color: lightgray;display: inline-block"  v-if="checkedQuestionTypeArray && checkedQuestionTypeArray.includes('4')">上机题为独立手选出题,勾选上机题后,下方将出现独立出题选项</span>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('1')"  style="width: 300px">
                        <el-form-item prop="singleCount" label="单选数量">
                            <el-input-number v-model="data.singleCount" :min="0" :max="50" placeholder="单选题数量"></el-input-number>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('1')"  style="width: 300px">
                        <el-form-item prop="singleScore" label="单选分数">
                            <el-input-number v-model="data.singleScore" :min="0" :max="50" placeholder="单题分数"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('2')" style="width: 300px">
                        <el-form-item prop="selectionCount" label="多选数量">
                            <el-input-number v-model="data.selectionCount" :min="0" :max="50" placeholder="多选题数量"></el-input-number>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('2')" style="width: 300px">
                        <el-form-item prop="selectionScore" label="多选分数">
                            <el-input-number v-model="data.selectionScore" :min="0" :max="50" placeholder="多选分数"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('3')" style="width: 300px">
                        <el-form-item prop="askCount" label="问答数量">
                            <el-input-number v-model="data.askCount" :min="0" :max="50" placeholder="问答题数量"></el-input-number>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12" v-if="checkedQuestionTypeArray.includes('3')" style="width: 300px">
                        <el-form-item prop="askScore" label="问答分数">
                            <el-input-number v-model="data.askScore" :min="0" :max="50" placeholder="问答分数"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  v-if="checkedQuestionTypeArray && checkedQuestionTypeArray.includes('4')">
                    <el-col :span="24">
                        <el-form-item prop="chapterId" label="机试章节">
                            <el-cascader-panel :props="{multiple: true,emitPath:false,value:'id',label:'name',children:'children'}" :show-all-levels="false" collapse-tags clearable filterable style="width: 800px;" :options="chapterData" v-model="temp">
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader-panel>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="checkedQuestionTypeArray && checkedQuestionTypeArray.includes('4') && temp && temp.length > 0">
                    <el-col :span="24">
                        <el-form-item prop="upperJoins" label="选择机试">
                            <el-select v-model="data.upperJoins" style="width: 600px;">
                                <el-option :label="item.upperContent" :value="item.id" :key="item.id" v-for="item in upperList"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row v-if="checkedQuestionTypeArray && checkedQuestionTypeArray.includes('4') && temp && temp.length > 0">
                    <el-col :span="24">
                        <el-form-item prop="upperScore" label="机试分数">
                            <el-input v-model="data.upperScore" placeholder="请输入机试题分数" style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>


            <template slot="footer">
                <el-button type="success"  @click="ok" size="mini" icon="el-icon-check">确认</el-button>
            </template>

        </el-dialog>
    </div>
</template>

<script>

    import { getChapterChildrenBySchool } from "@/api/academic/school";
    import { getQuestionsByChapterIdsAndQuestionTypeIds } from "@/api/academic/question";
    import { getUpperListByChapters } from "@/api/academic/upper";

    export default {
        name:'exam-auto-child',
        data(){
            return {
                value : false,
                data:{}, //提交的合并数据
                temp:null, //上机题所选章节
                chapterData:[],//章节集合
                upperList:[], //上机题集合
                fullscreenLoading:false,
                checkedChapterIdArray:[], //选择出题章节的id数组
                checkedQuestionTypeArray:[], //选择的题型
                count:{
                    single:0, //所选章节的单选题数量
                    selection:0, //所选章节的多选题数量
                    ask:0 //所选章节的问答题数量
                },
            }
        },
        watch:{
            value(data){
                if(data){
                    getChapterChildrenBySchool().then(res=>{
                        this.chapterData = res.data.data;
                    })
                }
            },
            checkedChapterIdArray(data){ //监听用户选中的章节数组，
                if(data.length == 0){
                    this.checkedQuestionTypeArray = [];
                }
            },
            checkedQuestionTypeArray(data){
                if(data.length > 0){
                    let chapterIds = this.checkedChapterIdArray.join(",");  //拿到用户选择的章节的id数组转换成字符串 ，
                    let questionTypeIds = this.checkedQuestionTypeArray.join(","); //拿到用户选择的题型数组 转换成字符串
                    this.fullscreenLoading = true;
                    getQuestionsByChapterIdsAndQuestionTypeIds({chapterIds:chapterIds,questionTypeIds:questionTypeIds}).then(res=>{
                        this.count.single = res.data.data.singleCount;
                        this.count.selection = res.data.data.selectionCount;
                        this.count.ask = res.data.data.askCount;
                        this.fullscreenLoading = false;
                    })
                }else if(data.length  == 0){//如果清空了题型选项，则重置相关数据

                    this.data.singleCount = 0;
                    this.data.singleScore = 0;
                    this.data.selectionCount = 0;
                    this.data.selectionScore = 0;
                    this.data.askCount = 0;
                    this.data.askScore = 0;
                    this.data.upperCount = 0;

                    this.temp = null;
                    this.upperList = [];

                    this.count.single = 0;
                    this.count.selection = 0;
                    this.count.ask = 0;
                }
            },
            temp(data){
                if(data && data.length > 0){
                    this.upperList = [];
                    //通过章节id组查询机试题
                    getUpperListByChapters({chapterIds:data}).then(res=>{
                        if(res.data.success){
                            this.upperList = res.data.data;
                        }
                    });
                }
            }
        },
        methods:{
            ok(){
                if(this.checkedChapterIdArray.length == 0){
                    this.$message.error("请选择章节");
                    return false;
                }

                if(this.checkedQuestionTypeArray.length == 0){
                    this.$message.error("请选择试题类型");
                    return false;
                }


                let questionTypeIds = this.checkedQuestionTypeArray.join(",");

                let sum = 0; //如果最终的sum不等于100 则禁止提交

                if(questionTypeIds.includes("1")){
                    if(!this.data.singleCount){
                        this.$message.error("请给出单选题数量");
                        return false;
                    }
                    if(!this.data.singleScore){
                        this.$message.error("请给出单选题单题分数");
                        return false;
                    }

                    if(this.data.singleScore <= 0){
                        this.$message.error("请给出正确的分数");
                        return false;
                    }

                    if(this.data.singleCount > this.count.single){
                        this.$message.error("单选题数量大于题库实际数量,请重新填写");
                        return false;
                    }

                    sum = sum + this.data.singleCount * this.data.singleScore; //单选题总分

                }else{
                    this.data.singleCount = 0;
                    this.data.singleScore = 0;
                }


                if(questionTypeIds.includes("2")){
                    if(!this.data.selectionCount){
                        this.$message.error("请给出多选题数量");
                        return false;
                    }

                    if(!this.data.selectionScore){
                        this.$message.error("请给出多选题单题分数");
                        return false;
                    }

                    if(this.data.selectionScore <= 0){
                        this.$message.error("请给出正确的分数");
                        return false;
                    }

                    if(this.data.selectionCount > this.count.selection){
                        this.$message.error("多选题数量大于题库实际数量,请重新填写");
                        return false;
                    }

                    sum = sum + this.data.selectionCount * this.data.selectionScore; //多选题总分

                }else{
                    this.data.selectionCount = 0;
                    this.data.selectionScore = 0;
                }

                if(questionTypeIds.includes("3")){
                    if(!this.data.askCount){
                        this.$message.error("请给出问答题数量");
                        return false;
                    }

                    if(!this.data.askScore){
                        this.$message.error("请给出问答题单题分数");
                        return false;
                    }

                    if(this.data.askScore <= 0){
                        this.$message.error("请给出正确的分数");
                        return false;
                    }

                    if(this.data.askCount > this.count.ask){
                        this.$message.error("问答题数量大于题库实际数量,请重新填写");
                        return false;
                    }

                    sum = sum + this.data.askCount * this.data.askScore;
                }else{
                    this.data.askCount = 0;
                    this.data.askScore = 0;
                }



                if(questionTypeIds.includes("4")){

                    this.data.upperCount = 1;

                    if(!this.data.upperJoins){
                        this.$message.error("请选择上机题");
                        return false;
                    }

                    if(!this.data.upperScore){
                        this.$message.error("请给出上机题分数");
                        return false;
                    }

                    if(this.data.upperScore <= 0){
                        this.$message.error("请给出正确的上机题分数");
                        return false;
                    }

                    sum = sum + this.data.upperCount * this.data.upperScore;
                }else{
                    this.data.upperCount = 0;
                    this.data.upperScore = 0;
                    this.temp = null;
                    this.upperList = [];
                }

                if(sum != 100){
                    this.$message.error("总分不是100分,请重新给分");
                    return false;
                }


                this.data.chapterIds = this.checkedChapterIdArray.join(",");
                this.data.questionTypeIds = this.checkedQuestionTypeArray.join(",");

                this.$parent.autoExam = this.data;

                this.value = false;


            }
        }
    }
</script>
<style>

</style>